import React, { useState, memo, useEffect, useMemo, useRef } from 'react';
import { Input } from 'antd';
import { useModel } from "umi"


function Rowtext({ content, setconfig, checkedId, id, style }) {
    const [edit, setedit] = useState(false);
    const { initialState, setInitialState } = useModel("@@initialState");

    useEffect(() => {
        if (initialState.vals) {
            setconfig((config) => {
                let newconfig = JSON.parse(JSON.stringify(config));
                newconfig.pages = newconfig?.pages?.map?.(item => {
                    if (item.active) {
                        item.components = item?.components?.map?.(it => {
                            if (it.id == initialState.editid) {
                                it.content = initialState.vals;
                                setInitialState(s => ({ ...s, vals: null, editid: null }))
                            }
                            return it
                        })
                    }
                    return item
                });
                return newconfig
            });
        };
        let doms = Array.prototype.slice.call(document.getElementsByClassName('tag'));
        let listen = doms && doms.length > 0 ? doms.forEach(ele => {
            if (!ele?.lastChild?.className) {
                ele.style.backgroundColor = "#d98868";
            }
            let pnode = ele.parentNode;
            ele.lastChild?.addEventListener?.('click', (e) => {
                let curid = e.target.getAttribute("data-id");//当前操作文本id
                e.target.parentNode.remove();//dom上移除
                let replacstart = `<div class="tag">`;//开始标签
                let regs = new RegExp(replacstart, "g");//开始正则
                let replacend = `</div>`;//结束标签
                let reg = new RegExp(replacend, "g");//结束正则
                let pcontent = pnode.innerHTML;//当前操作dom内容
                let curcontent = pcontent.replace(/<\/?b[^>]*>/g, "").replace(regs, `{{`).replace(reg, `}}`);//内容去除span标签
                setconfig((config) => {
                    let newconfig = JSON.parse(JSON.stringify(config));
                    newconfig.pages = newconfig?.pages?.map?.(item => {
                        if (item.active) {
                            item.components = item?.components?.map?.(it => {
                                if (it.id == curid) {
                                    it.content = curcontent;
                                }
                                return it
                            })
                        }
                        return item
                    });
                    return newconfig
                });
            });
        }) : null;
        return listen
    }, [initialState.components, content]);


    let replacecontent = useMemo(() => {
        let str = content.replace(/{{/g, `<div class="tag">`).replace(/}}/g, `<b class="close" data-id="${id}"></b></div>`);
        return str
    }, [content])

    return (
        (edit && checkedId == id) ?
            <div
                suppressContentEditableWarning
                contentEditable={true}
                data-no-dnd="false"
                onDoubleClick={() => {
                    //设置编辑状态
                    setedit(true)
                }}
                className='sets'
                id={"sets" + id}
                onInput={(e) => {
                    let value = e.target?.innerText ?? " ";
                    setInitialState(s => ({ ...s, vals: value, editid: id }))
                }}
                style={{ margin: 0, width: "100%", height: "100%", fontFamily: style.fontFamily, whiteSpace: "pre-wrap" }}
                dangerouslySetInnerHTML={{ '__html': content }}
            >
            </div> :
            <div
                suppressContentEditableWarning
                id={"sets" + id}
                onDoubleClick={() => {
                    //设置编辑状态
                    setedit(true)
                }}
                className='nodnd'
                style={{ margin: 0, width: "100%", height: "100%", fontFamily: style.fontFamily, whiteSpace: "pre-wrap" }}
                dangerouslySetInnerHTML={{ '__html': replacecontent }}
            >
            </div>
    );
}

export default memo(Rowtext);